﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HomeRight.ascx.cs" Inherits="SonCa.SN.ASCX.HomeRight" %>

<script type="text/javascript">
    $("div.demo").scrollTop(300);

    var idChatTo;
    var idCurrent;
    var fullNameSendChat;
    var isOnlineChatTo = true;

    $(document).ready(function () {
        LoadFriendsChat();

        idCurrent = $("#<%=hdfCurrentID.ClientID%>").val();        

        chat.client.setChatWindow = function (strGroupName, strChatTo, isOnline) {
            isOnlineChatTo = isOnline;
            $(".number_popup" + strChatTo).attr('groupname', strGroupName);
            $(".number_popup" + strChatTo).css('display', 'block');
            var fullName = $("#fullname_" + strChatTo).text();
            $('div[groupname=' + strGroupName + ']').find("strong").text(fullName);

            // Load message chat
            LoadMessageChat(idCurrent, strChatTo);
        };

        chat.client.addMessage = function (content, groupName, idSent) {
            if ($('div[groupname=' + groupName + ']').length == 0) {
                var popup = $("#popup_chat").clone(true);
                $(popup).css("display", "block");
                $(popup).attr("class", "number_popup" + idSent);
                $(popup).attr("groupname", groupName);
                $(popup).find("div:eq(1)").attr("id", "minimizeActive" + idSent);
                $(popup).find("div:eq(0)").find("strong").attr("class", "strongUser" + idSent);
                $(popup).find("#loadingchat").attr("class", "loadingchat" + idSent);
                GetFullName(popup, idSent);
                $(popup).find("#closePopupChat").attr("class", "closechat" + idSent);
                $(popup).find("#maximizePopupChat").attr("class", "maximizech" + idSent);
                $(popup).find("#minimizePopupChat").attr("class", "minimizechat" + idSent);
                $(popup).find("input").attr("class", "txtChat" + idSent);
                $(popup).find("#btnSendChat").attr("class", "btnSendChat" + idSent);
                $(popup).find("#contentChat").attr("class", "contentChat" + idSent);
                if (num_popup > 0) {
                    position_right += 210;
                    $(popup).css("right", position_right + "px");
                }
                $("#appendPopupChat").append(popup);
                //accountChatList[num_popup] = id;
                //num_popup = num_popup + 1;

                // Load message chat
                LoadMessageChat(idCurrent, idSent);
            }
            else {
                $(".contentChat" + idSent).animate({ scrollTop: "500px" });
            }
            $('div[groupname=' + groupName + ']').find('#contentChat').append(content);
        };

        $("#broadcast").click(function () {
            // Call the chat method on the server
            chat.server.send($(".txtChat" + idChatTo).val());
        });

        setInterval("LoadFriendsChat()", 20000);
    });

    function LoadMessageChat(currentID, chatToID) {
        $.ajax({
            type: "post",
            url: "../Services/AjaxService.svc/LoadMessageChat",
            data: '{"currentID": "' + currentID + '","chatToID": "' + chatToID + '"}',
            contentType: "application/json; charset=utf-8;",
            dataType: "json",
            beforeSend: function () {
                $(".loadingchat" + chatToID).show();
            },
            success: function (html) {
                $(".contentChat" + chatToID).html(html.d);
                $(".contentChat" + chatToID).animate({ scrollTop: "500px" });
                $(".loadingchat" + chatToID).hide();
            },
            error: function () { }
        });
    }

    function GetFullName(popup,accountID) {
        $.ajax({
            type: "post",
            url: "../Services/AjaxService.svc/GetFullNameByAccountID",
            data: '{"accountID": "' + accountID + '"}',
            contentType: "application/json; charset=utf-8;",
            dataType: "json",
            success: function (mes) {
                if (mes.d != "") {                    
                    $(popup).find("div:eq(0)").find("strong").text(mes.d);
                }
                else {
                    $(popup).find("div:eq(0)").find("strong").text("User");
                }
            }
        });
    }    

    function LoadFriendsChat() {
        $.ajax({
            type: "post",
            url: "../Services/AjaxService.svc/LoadFriendsChat",
            contentType: "application/json; charset=utf-8;",
            dataType: "json",
            success: function (html) {
                $("#listFriendsChat").html(html.d);
            }
        });
    }

    function ChatFriend(obj) {
        if (num_popup < 4) {
            var id = $(obj).attr("id");
            id = String(id).substring(11, String(id).length);
            idChatTo = id;                        

            var popup = $("#popup_chat").clone(true);
            $(popup).attr("class", "number_popup" + id);            
            if ($(".number_popup" + id).length > 0) {  // popup is exists
                $(".number_popup" + id).find("#title_chat").css("background-color", "White");
                setTimeout(function () { $(".number_popup" + id).find("#title_chat").css("background-color", "#3074FF") }, 200);
                return;
            }
            chat.server.createGroup($("#<%=hdfCurrentID.ClientID%>").val(), id);
            $(popup).find("div:eq(1)").attr("id", "minimizeActive" + id);
            $(popup).find("div:eq(0)").find("strong").attr("class", "strongUser" + id);
            $(popup).find("#loadingchat").attr("class","loadingchat" + id);
            $(popup).find("#closePopupChat").attr("class", "closechat" + id);
            $(popup).find("#maximizePopupChat").attr("class","maximizech" + id);
            $(popup).find("#minimizePopupChat").attr("class","minimizechat" + id);
            $(popup).find("input").attr("class", "txtChat" + id);
            $(popup).find("#btnSendChat").attr("class", "btnSendChat" + id);
            $(popup).find("#contentChat").attr("class", "contentChat" + id);
            if (num_popup > 0) {
                position_right += 210;
                $(popup).css("right", position_right + "px");
            }                                
            $("#appendPopupChat").append(popup);                                                
            accountChatList[num_popup] = id;
            num_popup = num_popup + 1;
        }
    }    
</script>

<div class="span3"> 
    <div class="row">
        <div class="span3">                	
            <div class="bg_goc2 pad3 title8">
                Tìm bạn bè trên MXH sơn ca qua các mạng khác<br />
                <img src="../img/img16.jpg"  class="mgtop5" />
            </div>              
            <div class="bg_goc2 pad4">
                <div class="title4 icon_chat">chat 
                    <img src="../img/icon_hide.jpg" width="12" height="10" class="cpos_2 mgleft20 mgtop5" />
                    <img src="../img/icon_setting.jpg" width="10" height="10" class="cpos_2 mgtop5" />
                </div>
                <div class="demo mgtop10">
                    <div align="center">
                        <asp:HiddenField ID="hdfCurrentID" runat="server" />
                        <asp:Label ID="lblMsgListChat" runat="server" Visible="false" Font-Bold="true" ForeColor="#0066FF"></asp:Label>
                    </div>
                    <div id="listFriendsChat"></div>                    
                    <div class="clearer"></div>
                </div>
        	    <div class="clearer"></div>                    
            </div>              
            <div class="bg_goc2 pad4">
                <div class="title4 icon_member">thành viên hát </div>
                <div class="clearer"></div>
                <div class="demo mgtop10">
                    <div class="icon_notnhac"><a href="#">Nhạc Việt Nam</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Quê hương</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Thiếu nhi</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Cách mạng</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Pop/ Rock</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Audiophile</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Âu/ Mỹ</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Trữ tình</a></div>
                        
                    <div class="icon_notnhac"><a href="#">Nhạc Việt Nam</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Quê hương</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Thiếu nhi</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Cách mạng</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Pop/ Rock</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Audiophile</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Âu/ Mỹ</a></div>
                    <div class="icon_notnhac"><a href="#">Nhạc Trữ tình</a></div>
                  <div class="clearer"></div>
                </div>
    <script type="text/javascript">    
        $("div.demo").scrollTop(300);
    </script>
        	    <div class="clearer"></div>
            </div>
            <div class="bg_goc2 pad5">
                <div class="icon_karaoke title4">karaoke</div>
            </div>
                
            <div class="bg_goc2 pad5">
                <div class="icon_sonca title4">sơn ca mp3</div>
            </div>
                
            <div class="bg_goc2 pad5">
                <div class="icon_video title4">video</div>
            </div>
            <img src="../img/img17.jpg" width="231" height="278" class="mgtop10" />
        </div>
    </div>
</div>